<template>
  <div class="box">
    <el-dialog :visible.sync="ping.speedOpen" width="30%" :show-close="true" :close-on-click-modal="false" @close="handStart">
      <div slot="title" class="dialog-title">
        <span style="font-size: 18px;">ping</span>
        <span class="test-speed1">{{ ping.name }}</span>
      </div>
      <!-- <p class="test-speed1">{{ping.name}}</p> -->
      <ul class="ping_box">
        <div class="jiazai" v-show="jiazai">
          <i class="el-icon-loading"></i>
        </div>
        <div style="color: red; font-size: 18px; margin: 50px 120px;" v-show="shibai">ping失败，请检查IP地址是否正确！</div>
        <li v-for="(item, index) in pingList" :key="index">{{ item }}</li>
      </ul>
      <span slot="footer">
        <el-button type="primary" @click="handStart">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { ziC } from '@/utils/allUrl.js'
export default {
  props: ['ping'],
  data: function() {
    return {
      pingList: [],
      jiazai: true,
      shibai: false,
      cancel: null
    }
  },
  watch: {
    ping: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler: function(newVal, oldVal) {
        if (newVal.speedOpen) {
          this.getshu(newVal)
        }
      }
    }
  },
  methods: {
    handStart: function() {
      this.$emit('guanbi', {
        type: false
      })
      this.pingList = []
      this.shibai = false
      this.cancel()
      setTimeout(() => {
        this.jiazai = true
      }, 1000)
    },
    async getshu(val) {
      const CancelToken = this.$http.CancelToken
      const self = this
      const params = new URLSearchParams()
      params.append('ipAddress', val.ip)
      params.append('pingTimes', 4)
      params.append('timeOut', 200)
      const { data: res } = await this.$http.post(`${ziC}ping/getMSG`, params, {
        cancelToken: new CancelToken(function executor(c) {
          self.cancel = c
          // 这个参数 c 就是CancelToken构造函数里面自带的取消请求的函数，这里把该函数当参数用
        })
      })
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        this.jiazai = false
        this.shibai = true
        return this.$message({
          type: 'error',
          message: res.message,
          center: true
        })
      }
      this.pingList = res.data.list
      this.jiazai = false
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  // width: 100%;
  // height: 100%;
  .dialog-title {
    position: relative;
    .test-speed1 {
      position: absolute;
      left: 50%;
      transform: translatex(-50%);
      text-align: center;
      font-size: 16px;
      font-weight: 600;
    }
  }

  .ping_box {
    width: 100%;
    height: 300px;
    border: 1px solid #eee;
    // background-color: rgba(0, 0, 0, 0.8);
    overflow: auto;
    > li {
      padding: 5px 15px;
      // height: 30px;
      // line-height: 30px;
      color: #333;
    }
    .jiazai {
      width: 100px;
      height: 100px;
      margin: 80px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      > i {
        font-size: 35px;
        color: #333;
      }
    }
  }
}
</style>
